<template>
	<view class="app-nearby-search-result" :style="[AppSkinVar]">
		<view class="bg-white search-top-fixed">
			<view class="search-input">
				<e-search :show-action="false" :search-icon-color="AppSkin.primary" :placeholder="$t('layout.请输入关键词')" v-model="keyword" @search="handleRefresh()"></e-search>
			</view>
			<view class="e-flex tab-view e-font-30">
				<view class="e-flex-1 e-flex e-flex-xy-center" v-for="item in filterList" :key="item.id" @tap="hanldeChangeTab(item)">
					<text :class="{ 'fw-600': showObject[item.type] }" :style="{ color: showObject[item.type] ? AppSkin.primary : '' }">{{ item.name }}</text>
					<text class="arrow-bottom" :style="{ color: showObject[item.type] ? AppSkin.primary : '#ccc' }"></text>
				</view>
			</view>
		</view>
		<nearby-store-item :info="item" v-for="item in storeList" :key="item.id"></nearby-store-item>
		<empty :text="$t('nearby.empty')" :icon="$staticPath('default_img.png')" v-if="isEmpty"></empty>
		<load-more :showLoad="showLoad" v-else></load-more>

		<nearby-store-type
			:value="categoryOne"
			:show="showObject.allShow"
			marginTop="120px"
			:oneClassifyList="allClassifyList"
			:twoClassifyList="twoClassifyList"
			@close="(e) => (showObject.allShow = !e)"
			@change="handleChangeCategory"
			@select="handleSelectCategory"
		></nearby-store-type>
		<nearby-store-sort :show="showObject.sortShow" marginTop="120px" @close="(e) => (showObject.sortShow = !e)" @change="handleChangeSort"></nearby-store-sort>
		<nearby-store-filter :show="showObject.filtrateShow" marginTop="120px" @close="(e) => (showObject.filtrateShow = !e)" @change="handleChangeFilter"></nearby-store-filter>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useCurrentInstance, useNearby, useQueryPage } from '@/common/hooks';
import { getNearbyStoreList } from '@/common/request/api';
import { onReachBottom } from '@dcloudio/uni-app';

const props = defineProps<{
	categoryOne: string;
	keyword: string;
}>();

const ctx = useCurrentInstance();

const {
	getLocation,
	showObject,
	filterList,
	allClassifyList,
	oneClassifyList,
	twoClassifyList,
	currentCategory,
	handleSelectCategory,
	hanldeChangeTab,
	sortObj,
	handleChangeSort,
	filterObj,
	handleChangeFilter,
	categoryOne: _categoryOne,
	handleChangeCategory,
	setResetFn
} = useNearby(() => {
	if (props.categoryOne) {
		oneClassifyList.value.some((item) => {
			if (item.id == Number(props.categoryOne)) {
				filterList.value[0].name = item.name;
				return true;
			}
		});
		handleChangeCategory(Number(props.categoryOne));
	}
});
if (props.categoryOne) {
	_categoryOne.value = Number(props.categoryOne);
	currentCategory.value.id = _categoryOne.value;
}

const keyword = ref(props.keyword || '');
const requestParams = computed(() => {
	return {
		industry: currentCategory.value.id === -1 ? undefined : currentCategory.value.id,
		keyword: keyword.value,
		...sortObj.value,
		...filterObj.value
	};
});
const {
	showLoad,
	isEmpty,
	list: storeList,
	handleQueryPage,
	handleRefresh
} = useQueryPage({
	api: getNearbyStoreList,
	option: {
		params: requestParams,
		responseKey: 'data.rows',
		totalKey: 'data.total'
	}
});

setResetFn(handleRefresh);

const init = async () => {
	try {
		await getLocation();
	} catch (e) {}
	handleRefresh();
};

init();

onReachBottom(() => {
	handleQueryPage()
})
</script>
<style>
page {
	background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
@include appBem_b(nearby-search-result) {
	padding-top: 210rpx;
}
.arrow-bottom {
	font-family: 'bottomArrowIconfont' !important;
	font-size: 6px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #ccc;
	margin-left: 14rpx;

	&:before {
		content: '\e62a';
	}
}

.search-input {
	padding: 30rpx 20rpx;
}

.search-top-fixed {
	@include fixed-top(99999);
}

.tab-view {
	height: 90rpx;
	color: #323232;
}
</style>
